<template>
  <!-- 柱状图 -->
  <div>
    <div :id="idName?idName:defaultIdName" style="width: 100%; height: 400px"></div>
  </div>
</template>
<script>
export default {
  name: "",
  props: {
    option: null,
    idName:null,
  },
  data() {
    return {
      option2: {
        title: {
          text: "",
        },
        color: ["#003366", "#006699", "#4cabce", "#e5323e"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["Forest", "Steppe", "Desert", "Wetland"],
        },
        toolbox: {
          show: true,
          orient: "vertical",
          itemSize: 20,
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: {show: true, readOnly: false},
            magicType: { show: true, type: ["line", "bar", "stack", "tiled"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        // xAxis: [
        //   {
        //     type: "category",
        //     axisTick: { show: false },
        //     data: [],
        //   },
        // ],
        // yAxis: [
        //   {
        //     type: "value",
        //   },
        // ],
        series: [
          {
            name: "总投资（亿元）",
            type: "bar",
            barGap: 0,
            data: [],
          },
          {
            name: "总用地",
            type: "bar",
            data: [],
          },
        ],
      },
      defaultIdName: "barChart",
    };
  },
  mounted() {
    console.log("data", this.idName,this.defaultIdName);
    this.creatChart();
  },
  methods: {
    //创建累计增速折线统计图
    //单页面多个图表要传idName 区分
    creatChart() {
      var idName = this.idName?this.idName:this.defaultIdName
      this.option2 = Object.assign(this.option2, this.option);
      console.log(this.$echarts)
      let myChart = this.$echarts.init(document.getElementById(idName));
      myChart.setOption(this.option2, true);
      //       1、setOption(option,{boolean = true})
      // 1)第一个参数option，配置图标实例可配置选项
      // 2)第二个表示是否合并option，默认false，多次调用时option选项是默认合并的，可设置为true阻止与上次option的合并
    },
  },
};
</script>
